<template>
  <div class="package-main">
    <ul class="main-wrap">
      <li
        v-for="(item,index) in allData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :key="index"
        class="main-item"
      >
        <el-card :body-style="{ padding: '0px' }" class="nav-item" shadow="never">
          <div class="image">
            <img :src="item.url" style="width:100%;"/>
            <span class="right-tip">{{ item.subjectNumber }}个课程</span>
            <div v-if="item.status=== '直播中'" class="liveTag-box" style="background:#fd3957;">
              <img :src="item.liveTagUrl"/>
              <span>{{ item.status }}</span>
            </div>
            <div v-if="item.status=== '未开播'" class="liveTag-box" style="background:#bcbcbc;">
              <img :src="item.liveTagUrl"/>
              <span>{{ item.status }}</span>
              <span class="liveTag-right">{{ item.liveTime }}开播</span>
            </div>
            <div v-if="item.status=== '回放'" class="liveTag-box" style="background:#27bef0;">
              <img :src="item.liveTagUrl"/>
              <span>{{ item.status }}</span>
            </div>
          </div>
          <ul class="class-body">
            <li class="title">{{ item.title }}</li>
            <li class="class-detail">
              <span>{{ item.detail }}</span>
            </li>
            <li class="price">
              <span class="real">￥{{ item.currentPrice }}</span>
              <span class="ago">￥{{ item.agoPrice }}</span>
              <!--<span class="reserve">{{ // item.already }}订购</span>-->
            </li>
            <li class="class-button">
              <el-button
                v-if="item.isSelf === false"
                size="mini"
                type="primary"
                @click="manageClass(item)"
              >管理
              </el-button>
              <el-button
                v-if="item.isSelf === true"
                size="mini"
                type="warning"
                @click="settingClass(item)"
              >设置
              </el-button>
              <el-button
                v-if="item.published === false"
                size="mini"
                type="success"
                @click="openClass(item)"
              >上架
              </el-button>
              <el-button
                v-if="item.published === true"
                size="mini"
                type="danger"
                @click="closeClass(item)"
              >下架
              </el-button>
              <el-button size="mini">删除</el-button>
            </li>
          </ul>
          <span
            :class="{published:item.published}"
            class="left-tip"
          >{{ item.published ? '在售': '停售' }}</span>
        </el-card>
      </li>
    </ul>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :page-count="pageCount"
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        allData: []
      }
    },
    computed: {
      pageCount() {
        return Math.ceil(this.allData.length / 10)
      }
    },
    methods: {
      handleCurrentChange(val) {
        console.log(val)
        this.currentPage = val
      },
      openClass(item) {
        if (item.isSelf) {
          if (item.isSet) {
            item.published = true
          } else {
            this.$message({
              type: 'info',
              message: '还未设置课程！请先设置课程后再提交。'
            })
          }
        } else {
          item.published = true
        }
      },
      closeClass(item) {
        item.published = false
      },
      settingClass(item) {
        this.$router.push({
          name: 'Merchant-setting',
          params: item
        })
      },
      manageClass(item) {
        this.$router.push({
          name: 'Merchant-manage',
          params: item
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .package-main {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    min-width: 1003px;

    .main-wrap {
      overflow: hidden;
      list-style: none;
      margin: 0;
      padding: 0;
      width: 110%;
      margin-right: -67px;

      .main-item {
        margin-top: 20px;
        width: 16.58%;
        float: left;
        margin-right: 2%;
        height: 300px;

        .nav-item {
          width: 100%;
          min-width: 170px;
          position: relative;
          // @media screen and (max-width: 1950px) {
          //   height: 305px;
          // }
          // @media screen and (max-width: 1850px) {
          //   height: 295px;
          // }
          // @media screen and (max-width: 1750px) {
          //   height: 285px;
          // }
          // @media screen and (max-width: 1650px) {
          //   height: 275px;
          // }
          // @media screen and (max-width: 1550px) {
          //   height: 265px;
          // }
          // @media screen and (max-width: 1450px) {
          //   height: 255px;
          // }
          // @media screen and (max-width: 1350px) {
          //   height: 240px;
          // }
          .el-card__body {
            min-width: 170px;
          }

          .left-tip {
            display: inline-block;
            width: 50px;
            height: 25px;
            line-height: 25px;
            position: absolute;
            top: 12px;
            left: 0;
            // background-color: rgba(14, 212, 135, 0.9);
            background-color: rgba(228, 44, 44, 0.9);
            text-align: center;
            color: #fff;
            font-size: 14px;
          }

          .published {
            background-color: rgba(14, 212, 135, 0.9);
          }

          .image {
            position: relative;
            width: 100%;
            overflow: hidden;

            .right-tip {
              display: inline-block;
              position: absolute;
              right: 0;
              bottom: 4px;
              padding: 0 5px;
              height: 26px;
              line-height: 26px;
              text-align: center;
              font-size: 14px;
              color: #fff;
              border-radius: 3px;
              background-color: rgba(0, 0, 0, 0.6);
            }

            .mr {
              right: 70px;
            }

            .liveTag-box {
              position: absolute;
              left: 2px;
              bottom: 4px;
              padding: 0 5px;
              text-align: center;
              color: #fff;
              font-size: 14px;
              height: 26px;
              line-height: 26px;
              border-radius: 3px;

              img {
                margin-bottom: -1px;
              }

              .liveTag-right {
                position: absolute;
                right: -95px;
                bottom: 0px;
                padding: 0 5px;
                border-radius: 3px;
                background-color: rgba(0, 0, 0, 0.4);
              }
            }
          }

          .class-body {
            list-style: none;
            margin: 0;
            padding: 8px 14px 0 14px;

            &-self {
              padding: 1px 5px;
              background-color: red;
              border-radius: 5px;
              font-size: 12px;
              color: #fff;
              margin-left: 5px;
            }

            @media screen and (max-width: 1330px) {
              padding: 14px 4px;
            }

            .title {
              font-size: 16px;
              color: #626669;
            }

            .price {
              height: 32px;
              line-height: 32px;

              .real {
                float: left;
                font-size: 18px;
                color: #f21d1d;
                @media screen and (max-width: 1490px) {
                  font-size: 14px;
                }
              }

              .ago {
                font-size: 12px;
                text-decoration: line-through;
                color: #c5c8cb;
                @media screen and (max-width: 1490px) {
                  font-size: 10px;
                }
                @media screen and (max-width: 1330px) {
                  display: none;
                }
              }

              .reserve {
                float: right;
                color: #979ca0;
                font-size: 14px;
                vertical-align: center;
                @media screen and (max-width: 1490px) {
                  font-size: 12px;
                }
              }
            }

            .class-detail {
              padding-top: 8px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              span {
                color: #979ca0;
                font-size: 13px;
              }
            }

            .class-button {
              height: 32px;
              // padding-top: 4px;
              .el-button {
                float: right;
                margin-left: 10px;
                @media screen and (max-width: 1610px) {
                  font-size: 12px;
                  margin-left: 2px;
                  width: auto;
                  text-align: center;
                  padding: 7px 7px;
                }
              }
            }
          }
        }
      }
    }

    .el-pagination {
      width: 100%;
      text-align: center;
      height: 30px;
      margin-top: 12px;
    }
  }
</style>
